<template>
  <view class="content">
    <view class="section-title">
      <text class="title" :class="{ active: activeTab === 'nowPlaying' }" @click="tabClick('nowPlaying')">正在热映</text>
      <text class="title" :class="{ active: activeTab === 'upcoming' }" @click="tabClick('upcoming')">即将上映</text>
    </view>
    <view class="film-list">
      <block v-for="(film, index) in films" :key="index">
        <view class="film-item">
          <image :src="film.poster" class="film-poster"></image>
          <view class="film-info">
            <text class="film-title">{{ film.name }}</text>
			<br/>
            <text class="film-rating">观众评分 {{ film.grade }}</text>
			<br/>
            <text class="film-actors">主演：{{ film.actors.map(actor => actor.name).join(' ') }}</text>
			<br/>
            <text class="film-details">{{ film.nation }} | {{ film.runtime }}分钟</text>
          </view>
          <button class="buy-ticket" @click="buyTicket(film)">购票</button>
        </view>
      </block>
    </view>
    <button @click="loadMore" v-if="!loading && hasMore">加载更多</button>
    <text v-if="loading">加载中...</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      films: [],
      activeTab: 'nowPlaying',
      pageNum: 1,
      pageSize: 10,
      loading: false,
      hasMore: true
    };
  },
  onLoad() {
    this.fetchFilms();
  },
  methods: {
    fetchFilms() {
      if (this.loading || !this.hasMore) return;
      this.loading = true;
      uni.request({
        url: 'https://m.maizuo.com/gateway',
        method: 'GET',
        header: {
          'X-Host': 'mall.film-ticket.film.list',
          'User-Agent': 'Apifox/1.0.0 (https://apifox.com)'
        },
        data: {
          cityId: 110100,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: this.activeTab === 'nowPlaying' ? 1 : 2,
          k: 9650473
        },
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 0) {
            const newFilms = res.data.data.films || [];
            this.films = this.films.concat(newFilms);
            this.pageNum++;
            this.hasMore = newFilms.length > 0;
          } else {
            console.error('Failed to fetch films:', res);
          }
        },
        complete: () => {
          this.loading = false;
        },
        fail: (err) => {
          console.error('Request failed:', err);
          this.loading = false;
        }
      });
    },
    tabClick(tab) {
      this.activeTab = tab;
      this.pageNum = 1;
      this.films = [];
      this.hasMore = true;
      this.fetchFilms();
    },
    buyTicket(film) {
      uni.showToast({
        title: `购买 ${film.name} 的票`,
        icon: 'success'
      });
    },
    loadMore() {
      this.fetchFilms();
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  padding: 10px;
  border-bottom: 2px solid #ddd;
}

.title.active {
  border-bottom-color: #ff6633;
}

.film-list {
  display: flex;
  flex-direction: column;
}

.film-item {
  display: flex;
  padding: px 0;
  border-bottom: 1px solid #ddd;
}

.film-poster {
  width: 100px;
  height: 150px;
  margin-right: 15px;
}

.film-info {
  flex: 1;
}

.film-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.film-rating {
  color: #ff6633;
  margin-bottom: 5px;
}

.film-actors {
  margin-bottom: 5px;
}

.film-details {
  color: #666;
}

.buy-ticket {
  border: 1px solid #ff6633;
  border-radius: 5px;
  width: 50px;
  height:auto;
  padding: 10px;
  margin-left: auto;
  color: #ff6633;
  background-color: transparent;
}

.buy-ticket:hover {
  background-color: #ff6633;
  color: #fff;
}
</style>